<!DOCTYPE html>
<html>
<head>
<title>评分组件</title>
</head>
<body>
	<div id="app">
		<h1>测试发送消息</h1>
		<input type="text" v-model="msg">
		<button type="button" @click="sendMessage">添加</button>
		&nbsp;&nbsp;<button type="button" @click="listPage">测试分页</button>


		<h1>显示clickhouse数据</h1>

		<table border="1px" style="width: 60%">
			<thead>
				<th>行号</th>
				<th>id</th>
				<th>name</th>
				<th>操作</th>
			</thead>
			<tbody>
				<tr v-for="(o,index) in list">
					<td>{{index+1}}</td>
					<td>{{o.id}}</td>
					<td>{{o.name}}</td>
					<td>
						<button type="button" @click="deleteById(o.id)">删除</button>
						<button type="button" @click="updateById(o)">更新</button>
					</td>
				</tr>
			</tbody>

		</table>

	</div>


	<script src="http.js"></script>
	<script src="vue.global.prod.js"></script>
    <script type="text/javascript">
        Vue.createApp({
           data(){
               return { 
                   msg:'消息'
                  ,list:[]
               }
           },
           mounted:function(){
              this.query(); 
           },
           
           methods:{
               sendMessage() {
                   $http.post("index/sendMessage",{msg:this.msg}).then(res=>{
                       //if(res.success){
                       //    alert(res.message);
                       //}
                       console.log(res);
                       this.query();
                   })
               },
               query(){
                    $http.post("index/list",{}).then(res=>{
                       this.list=res.data;
                    }) 
               },
               listPage(){
                   $http.post("index/listPage",{pageNum:1,pageSize:2}).then(res=>{
                      let {pageNum,pageSize,pages ,size,list}=res;
                      this.list=list;
                   }) 
               }
               ,
               deleteById(id){
                   $http.post("index/deleteByIds",[id]).then(res=>{
                       this.query();
                   }) 
               },
               
               updateById(o){
                   $http.post("index/update",o).then(res=>{
                       this.query();
                   }) 
               }
               
           }
           
        
        }).mount('#app');
        
    </script>
</body>
</html>
